<template>
  <el-card style="margin-bottom: 15px">
    <el-form ref="form" :inline="true">
      <el-form-item label="一级分类">
        <el-select v-model="categoryStore.c1" @change="cateOneChange" :disabled="props.scene == 1 ? true : false">
          <el-option
            v-for="(item, index) in categoryStore.c1List"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select v-model="categoryStore.c2" @change="cateTwoChange" :disabled="props.scene == 1 ? true : false">
          <el-option
            v-for="(item, index) in categoryStore.c2List"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select v-model="categoryStore.c3" @change="cateThreeChange" :disabled="props.scene == 1 ? true : false">
          <el-option
            v-for="(item, index) in categoryStore.c3List"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts" name="category">
import { onMounted } from 'vue'
import { useCategory } from './logic'

const props = defineProps({
  scene: {
    type: Number,
    default: 0
  }
})

const { categoryStore, getList1, cateOneChange, cateTwoChange, cateThreeChange } = useCategory()

onMounted(async () => await getList1())
</script>

<style scoped lang="scss"></style>
